<template>
  <div>
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,i) in imgList" :key="i">
        <!-- 根据isfull的值显示不同的图片样式 -->
        <img :src="item.src" :class="{'imgAutoclass':isImgAuto}" alt="">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  export default {
    //别忘记加引号
    //isImgAuto=true 宽度自适应，高度100%。 
    props: ['imgList', 'isImgAuto']
  }
</script>

<style lang="scss" scoped>
  .mint-swipe {
    height: 200px;

    .mint-swipe-item {

      text-align: center;
      /*
      &:nth-child(1) {
        background-color: brown;
      }
      &:nth-child(2) {
        background-color: blueviolet;
      }
      &:nth-child(3) {
        background-color: rgb(37, 137, 150);
      }
      &:nth-child(4) {
        background-color: rgb(199, 170, 39);
      }
      */
      img {
        width: 100%; // height: 100%;
      }
      .imgAutoclass {
        width: auto;
        height: 100%;
      }
    }
  }
</style>

<style lang="scss">
  .mint-swipe-indicator {
    width: 11px;
    height: 11px;
    opacity: 1;
    border: 2px solid #03A9F4;
  }
</style>